<!--<script>-->
<!--import border from "@/views/formShortLink/border/index.vue";-->

<!--export default {-->
<!--  props: ['userInfo'],-->
<!--  components: { border },-->
<!--  data() {-->
<!--    return {-->
<!--      infoIme: {-->
<!--        jstx: require("../img/msg.svg"),-->
<!--        wz: require("../img/point.svg"),-->
<!--        gj: require("../img/guiji.svg"),-->
<!--        dw: require("../img/dingwei.svg"),-->
<!--        tz: require("../img/xiaoxi.svg"),-->
<!--        xt: require("../img/xietong.svg"),-->
<!--      },-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    rtn(v, txt) {-->
<!--      this.$emit("rtn", v, txt)-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--  <border :title="userInfo.label" @close="$emit('close')" w="300px" h="280px" y="50%">-->
<!--    <div class="userInfo">-->
<!--      <div class="top">-->
<!--        <div class="left">-->
<!--          <el-image src="" style="width: 69px;height: 69px;border-radius: 50%;margin-bottom: 5px;" />-->
<!--          <el-tag>在线</el-tag>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <span>手机号码 {{ userInfo.id }}</span>-->
<!--          <span>上报时间 {{ userInfo.points[userInfo.points.length - 1].time }}</span>-->
<!--          <span>今日在线 2小时24分钟</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="bottom">-->
<!--        <div class="info">-->
<!--          <div class="row">-->
<!--            <span>经纬度</span>-->
<!--            <span>123456，123456</span>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <span>终端型号</span>-->
<!--            <span>暂无</span>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <span>最后位置</span>-->
<!--            <span>武汉市国博中心附近123米处</span>-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <span>今日里程</span>-->
<!--            <span>1234米</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="btn">-->
<!--          <el-image title="即时通信" :src="infoIme.jstx" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('msgDiv')" />-->
<!--          <el-image title="定位" :src="infoIme.wz" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('drwz', userInfo.id)" />-->
<!--          <el-image title="轨迹" :src="infoIme.gj" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('traje', userInfo.id)" />-->
<!--          <el-image title="位置" :src="infoIme.dw" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('dw', userInfo.label)" />-->
<!--          <el-image title="通知下发" :src="infoIme.tz" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('notice')" />-->
<!--          <el-image title="任务协同" :src="infoIme.xt" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--            @click="rtn('colla')" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </border>-->

<!--</template>-->

<!--<style scoped lang="scss">-->
<!--.userInfo {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  color: #3D5063;-->

<!--  .top {-->
<!--    display: flex;-->
<!--    flex-direction: row;-->
<!--    align-items: center;-->
<!--    border: 1px dotted #6DABF7;-->
<!--    padding: 3px;-->
<!--    margin: 0 5px;-->
<!--    border-radius: 4px;-->

<!--    .left {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      align-items: center;-->
<!--      margin-right: 10px;-->
<!--    }-->

<!--    .right {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      line-height: 25px;-->

<!--    }-->
<!--  }-->

<!--  .bottom {-->
<!--    display: flex;-->
<!--    flex-direction: column;-->
<!--    margin: 10px;-->

<!--    .info {-->
<!--      display: flex;-->
<!--      flex-direction: column;-->
<!--      line-height: 25px;-->

<!--      .row {-->
<!--        display: flex;-->
<!--        flex-direction: row;-->
<!--        align-items: center;-->

<!--        span:nth-child(1) {-->
<!--          width: 60px;-->
<!--        }-->
<!--      }-->


<!--    }-->

<!--    .btn {-->
<!--      display: flex;-->
<!--      flex-direction: row;-->
<!--      align-items: center;-->
<!--      color: #00afff;-->
<!--      justify-content: space-between;-->
<!--      margin-top: 10px;-->

<!--      i {-->
<!--        padding: 3px;-->
<!--        font-size: 25px;-->
<!--        border-radius: 50%;-->
<!--        border: 1px solid #00afff;-->
<!--        cursor: pointer;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
<template>
  <border :title="userInfo.name || userInfo.userName || '用户详情'" @close="$emit('close')" w="320px" h="260px" y="13%" x="19%">
    <div class="userInfo">
      <div class="top">
        <div class="left">
          <el-image src="" style="width: 69px;height: 69px;border-radius: 50%;margin-bottom: 5px;" />
          <el-tag :type="userInfo.online ? 'success' : 'info'">
            {{ userInfo.online ? '在线' : '离线' }}
          </el-tag>
        </div>
        <div class="right">
          <span>手机号码： {{ userInfo.phone || userInfo.id || '暂无' }}</span>
          <span>上报时间：   {{ lastReportTime }}</span>
<!--          <span>今日在线 {{ onlineTimeToday }}</span>-->
        </div>
      </div>
      <div class="bottom">
        <div class="info">
          <div class="row">
            <span>用户ID</span>
            <span>{{ userInfo.userId || userInfo.id || '暂无' }}</span>
          </div>
<!--          <div class="row">-->
<!--            <span>终端型号</span>-->
<!--            <span>{{ userInfo.deviceType || '暂无' }}</span>-->
<!--          </div>-->
          <div class="row">
            <span>最后位置</span>
            <span :title="lastLocation || '暂无位置信息'">{{ lastLocation || '暂无位置信息' }}</span>
          </div>

          <div class="row">
            <span>今日里程</span>
            <span>{{ todayMileage }}</span>
          </div>
        </div>
        <div class="btn">
          <el-image title="即时通信" :src="infoIme.jstx" style="width: 50px;height: 50px;cursor:pointer;"
                    @click="rtn('msgDiv',userInfo.userId || userInfo.id)" />
          <el-image title="定位" :src="infoIme.wz" style="width: 50px;height: 50px;cursor:pointer;"
                    @click="rtn('drwz', userInfo)" />
          <el-image title="轨迹" :src="infoIme.gj" style="width: 50px;height: 50px;cursor:pointer;"
                    @click="rtn('traje', userInfo)" />
<!--          <el-image title="位置" :src="infoIme.dw" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--                    @click="rtn('dw', userInfo.name || userInfo.userName)" />-->
<!--          <el-image title="通知下发" :src="infoIme.tz" style="width: 40px;height: 40px;cursor:pointer;"-->
<!--                    @click="rtn('notice')" />-->
          <el-image title="任务下发" :src="infoIme.xt" style="width: 50px;height: 50px;cursor:pointer;"
                    @click="rtn('colla', userInfo.userId || userInfo.id)" />
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import border from "@/views/formShortLink/border/index.vue";
import {getAllGpsInfo} from "@/api/gpsinfo";

export default {
  props: ['userInfo','groupId'],
  components: { border },
  data() {
    const today = new Date();
    const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
    return {
      lastLocation:'暂无',
      lastReportTime:'暂无',
      gpsInfoTimer: null,
      startTime: `2025-10-08 00:00:00`,
      endTime: `${todayStr} 23:59:59`,
      infoIme: {
        jstx: require("../img/msg.svg"),
        wz: require("../img/point.svg"),
        gj: require("../img/guiji.svg"),
        dw: require("../img/dingwei.svg"),
        tz: require("../img/xiaoxi.svg"),
        xt: require("../img/xietong.svg"),
      },
    }
  },
  computed: {
    // 最后上报时间
    // lastReportTime() {
    //   const txt = JSON.parse(sessionStorage.getItem('tempGpsData'))
    //   if (this.userInfo.lastReportTime) {
    //     return this.formatTime(this.userInfo.lastReportTime)
    //   }
    //   if (this.userInfo.points && this.userInfo.points.length > 0) {
    //     const lastPoint = this.userInfo.points[this.userInfo.points.length - 1]
    //     return lastPoint.time || '暂无'
    //   }
    //   return '暂无'
    // },

    // 今日在线时长
    onlineTimeToday() {
      return this.userInfo.onlineTimeToday || '0小时0分钟'
    },

    // 最后位置
    // lastLocation() {
    //   if (this.userInfo.lastLocation) {
    //     return this.userInfo.lastLocation
    //   }
    //   if (this.userInfo.points && this.userInfo.points.length > 0) {
    //     const lastPoint = this.userInfo.points[this.userInfo.points.length - 1]
    //     if (lastPoint.coord) {
    //       return `${lastPoint.coord[0]}, ${lastPoint.coord[1]}`
    //     }
    //   }
    //   return '暂无位置信息'
    // },

    // 今日里程
    todayMileage() {
      return this.userInfo.todayMileage || '0米'
    }
  },
  mounted() {
    console.log('userInfo:', this.userInfo)
    this.getgpsInfo()
    this.gpsInfoTimer = setInterval(() => {
      this.getgpsInfo()
    }, 5000)
  },
  beforeDestroy() {
    if (this.gpsInfoTimer) {
      clearInterval(this.gpsInfoTimer)
      this.gpsInfoTimer = null
    }
  },
  methods: {
    getgpsInfo() {
      const txt = JSON.parse(sessionStorage.getItem('tempGpsData'));

      // 获取当前用户的手机号或用户ID
      const userPhone = this.userInfo.phone;
      const userId = this.userInfo.userId || this.userInfo.id;

      // 先从缓存中查找
      if (txt) {
        let matchedData = null;

        // 遍历txt对象查找匹配项
        for (const key in txt) {
          if (txt.hasOwnProperty(key)) {
            const data = txt[key];
            // 检查phone或userId是否匹配
            if (data.userid === userId || key === userPhone) {
              matchedData = data;
              break;
            }
          }
        }

        if (matchedData) {
          // 如果找到匹配数据，更新lastLocation和lastReportTime
          this.lastLocation = matchedData.remark1 || '暂无位置信息';
          this.lastReportTime = this.formatTime(matchedData.time);
          return;
        }
      }

      // 如果缓存中未找到匹配数据，则调用接口
      const startTimestamp = new Date(this.startTime).getTime();
      const endTimestamp = new Date(this.endTime).getTime();

      getAllGpsInfo(this.userInfo.phone, startTimestamp, endTimestamp).then(res => {
        // 按时间戳降序排序，获取最新的一条数据
        const latestData = res.data.sort((a, b) => b.time - a.time)[0];

        if (latestData) {
          this.lastLocation = latestData.remark1;
          this.lastReportTime = this.formatTime(latestData.time);
        } else {
          // 如果接口返回数据为空，设置默认值
          this.lastLocation = '暂无位置信息';
          this.lastReportTime = '暂无';
        }
      }).catch(() => {
        console.log('获取GPS信息失败');
        // 接口调用失败时设置默认值
        this.lastLocation = '暂无位置信息';
        this.lastReportTime = '暂无';
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    rtn(v, txt) {
      this.$emit("rtn", v, txt)
    },

    formatTime(timestamp) {
      if (!timestamp) return '暂无'

      try {
        const date = new Date(timestamp)
        if (isNaN(date.getTime())) {
          return timestamp // 如果已经是格式化字符串，直接返回
        }

        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      } catch (error) {
        console.error('时间格式化错误:', error)
        return '时间格式错误'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.userInfo {
  display: flex;
  flex-direction: column;
  color: #3D5063;

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px dotted #6DABF7;
    padding: 3px;
    margin: 0 5px;
    border-radius: 4px;

    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 10px;
    }

    .right {
      display: flex;
      flex-direction: column;
      line-height: 25px;

    }
  }

  .bottom {
    display: flex;
    flex-direction: column;
    margin: 10px;

    .info {
      display: flex;
      flex-direction: column;
      line-height: 25px;

      .row {
        display: flex;
        flex-direction: row;
        align-items: center;

        span:nth-child(1) {
          width: 60px;
        }
        span:nth-child(2) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 200px;
        }
      }


    }

    .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #00afff;
      justify-content: space-between;
      margin-top: 10px;

      i {
        padding: 3px;
        font-size: 25px;
        border-radius: 50%;
        border: 1px solid #00afff;
        cursor: pointer;
      }
    }
  }
}

</style>
